<script setup lang="ts">
import {computed} from "vue"
import appStore from "@/store/app"
import {useUiConfigure} from "@/apps/admin/hooks/layout";

const app = appStore()


/**
 * 主题数据
 */
const ThemeColor = computed(() => {
  let themeList: Array<{ label: string, name: string, color: string }> = []
  let theme: Array<{ label: string, name: string, color: string }> | any = app.ext?.option?.ThemeColor
  if (theme instanceof Array) {
    themeList = theme
  }
  return themeList
})


/**
 * 主题数据
 */
const MenuTheme = computed(() => {
  let themeList: Array<{ label: string, name: string, color: { ActiveTextColor: string, BackgroundColor: string, TextColor: string } }> = []
  let theme: Array<{ label: string, name: string, color: { ActiveTextColor: string, BackgroundColor: string, TextColor: string } }> | any = app.ext?.option?.MenuTheme
  if (theme instanceof Array) {
    themeList = theme
  }
  return themeList
})


const {setTheme, setMenuTheme, setMenuWidth, setUiSize, MenuWidth, size} = useUiConfigure()
</script>

<template>
  <div class="layout-theme app-margin-small">
    <div v-if="ThemeColor.length>0">
      <el-divider direction="horizontal">
        <span>主题色</span>
      </el-divider>
      <div>
        <el-row :gutter="20">
          <el-col v-for="item in ThemeColor" :span="3" :key="item.name">
            <div class="color-box" @click="setTheme(item.name)" :style="{background:item.color}"></div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div>
      <el-divider direction="horizontal">
        <span>菜单主题</span>
      </el-divider>
      <div>
        <el-row :gutter="20">
          <el-col v-for="item in MenuTheme" :span="3" :key="item.name">
            <div class="color-box" @click="setMenuTheme(item.color)" :style="{background:item.color.BackgroundColor}"></div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div>
      <el-divider direction="horizontal">
        <span>UI尺寸</span>
      </el-divider>
      <el-row :gutter="20">
        <el-col class="app-text-center" :span="8">
          <el-button class="app-width-full" :type="size==='small'?'primary':'info'" long="long" @click="setUiSize('small')">
            紧凑
          </el-button>
        </el-col>
        <el-col class="app-text-center" :span="8">
          <el-button class="app-width-full" :type="size==='default'?'primary':'info'" @click="setUiSize('default')">
            默认
          </el-button>
        </el-col>
        <el-col class="app-text-center" :span="8">
          <el-button class="app-width-full" :type="size==='large'?'primary':'info'" @click="setUiSize('large')">
            宽松
          </el-button>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-divider direction="horizontal">
        <span>菜单宽度</span>
      </el-divider>
      <div>
        <el-slider :min="170" :max="220" @input="setMenuWidth" :model-value="MenuWidth"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-theme {
  padding: 0 20px;

  .color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid var(--el-color-primary-light-5);
    border-radius: 4px;
  }
}
</style>